<template>
    <el-dialog v-model="show" title="添加用户" @close="hide">
        <el-form :model="form" :rules="rules" ref="formRef">
            <el-form-item label="账号" prop="username" label-width="100px">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="nickName" label="姓名" label-width="100px">
                <el-input v-model="form.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="email" label="邮箱" label-width="100px">
                <el-input v-model="form.email" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="password" label="密码" label-width="100px">
                <el-input
                    type="password"
                    :disabled="data"
                    v-model="form.password"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item prop="note" label="备注" label-width="100px">
                <el-input v-model="form.note" autocomplete="off" type="textarea" />
            </el-form-item>
            <el-form-item prop="status" label="是否启用" label-width="100px">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="hide">取消</el-button>
                <el-button type="primary" @click="sureFn">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { stringify } from 'querystring';
import { reactive, ref, watch } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { user } from '@/api/index';
const timer = new Date();
const form = reactive<IRegisterUserParams>({
    username: '',
    nickName: '',
    email: '',
    password: '',
    note: '',
    status: 0,

    //     "createTime": "2022-11-10T12:22:31.007Z",
    //   "hidden": 0,
    //   "icon": "string",
    //   "id": 0,
    //   "level": 0,
    //   "name": "string",
    //   "parentId": 0,
    //   "sort": 0,
    //   "title": "string"
});
// 校验规则
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 6, max: 20, message: '用名要在6~20个字符之间', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {
            type: 'email',
            message: '请填空正确的邮箱地址',
            trigger: ['blur', 'change'],
        },
    ],
};

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    data: {
        type: Number,
        default: 0,
    },
});

const formRef = ref<FormInstance>();

const emit = defineEmits(['hide2', 'refresh']);

const hide = () => {
    // 清空
    formRef.value?.resetFields();
    emit('hide2');
};

const sureFn = () => {
    // 表单检验，如果通过，再弹出提示
    formRef.value?.validate((valid: boolean) => {
        if (valid) {
            ElMessageBox.confirm('确定要添加该用户吗？', '添加用户', {
                type: 'warning',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            })
                .then(() => {
                    if (props.data !== 0) {
                        user.updateUserInfoApi(form as IUserModel).then(res => {
                            if (res.code === 200) {
                                // 提示用户
                                ElMessage.success('修改用户成功');
                                // 关闭 dialog
                                emit('hide2');
                                // 刷新表格
                                emit('refresh');
                            }
                        });
                    } else {
                        // 点击确定的回调
                        // 发请求把用户添加到后端
                        user.registerUserApi(form).then(res => {
                            if (res.code == 200) {
                                // 添加成功
                                ElMessage.success('添加用户成功');
                                // 关闭添加的弹出
                                emit('hide2');
                                // 通知父组件刷新表格
                                emit('refresh');
                                // 清空
                                formRef.value?.resetFields();
                            } else {
                                ElMessage.success(res.message + ',请重试');
                            }
                        });
                    }
                })
                .catch(() => {
                    // 清空
                });
        } else {
            return false;
        }
    });
};

// 当我们点击编辑。会修改从父组件传递进来的一个data,其实就是id
// 当id不为0，就是点的编辑

watch(
    () => props.data,
    () => {
        if (props.data === 0) {
            return;
        }
        user.getuserinfo(props.data).then(res => {
            if (res.code === 200) {
                // 把数据赋值给 表单
                Object.assign(form, res.data); // api 没见过，就去看文档， Object.assign() ---> MDN
            }
            user.getuserinfo(props.data).then(res => {
                if (res.code === 200) {
                    // 把数据赋值给 表单
                    Object.assign(form, res.data); // api 没见过，就去看文档， Object.assign() ---> MDN
                }
            });
        });
    }
);
</script>

<style scoped></style>
